<template>
  <div class="b-stats-middle">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card shadow="always" :body-style="{ padding: '0' }">
          <common-card title="半月内访问文章排行" :table="true">
            <template>
              <el-table
                :data="tableData"
                style="width: 100%"
                :show-header="false"
                @row-click="overallClick"
              >
                <el-table-column
                  prop="date"
                  label="日期"
                  width="180"
                ></el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="180"
                ></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
              </el-table>
            </template>
          </common-card>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="always" :body-style="{ padding: '0' }">
          <common-card title="分类文章数量总数占比" :pie="true">
            <template>
              <v-chart :option="categoryOptions" />
            </template>
            <template v-slot:footer>
              <div>
                <span>昨日访问量:</span>
                <span>0</span>
              </div>
            </template>
          </common-card>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import CommonCard from "./../../BCommonCard/index.vue";
export default {
  name: "BStatsTop",
  data() {
    return {
      categoryOptions: {},
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  mounted() {
    this.renderPieChart();
  },
  methods: {
    renderPieChart() {
      const mockData = [
        {
          legendname: "技术文章",
          value: 92,
          percent: "21.15",
          itemStyle: { color: "#41b883" },
          name: "技术文章 | 21.15%"
        },
        {
          legendname: "生活随笔",
          value: 67,
          percent: "15.40",
          itemStyle: { color: "#22a1ff" },
          name: "生活随笔 | 15.40%"
        },
        {
          legendname: "团队管理",
          value: 97,
          percent: "22.30",
          itemStyle: { color: "#ad4cad" },
          name: "团队管理 | 22.30%"
        },
        {
          legendname: "学习笔记",
          value: 92,
          percent: "21.15",
          itemStyle: { color: "#f01414" },
          name: "学习笔记 | 21.15%"
        },
        {
          legendname: "代码速记",
          value: 97,
          percent: "22.30",
          itemStyle: { color: "#7ed3f4" },
          name: "代码速记 | 22.30%"
        },
        {
          legendname: "你问我答",
          value: 67,
          percent: "15.40",
          itemStyle: { color: "#ffdc60" },
          name: "你问我答 | 15.40%"
        }
      ];
      this.categoryOptions = {
        series: [
          {
            type: "pie",
            data: mockData,
            label: {
              normal: {
                // show: false,
                formatter: function(params) {
                  return params.data.legendname;
                }
              }
            },
            center: ["36%", "50%"],
            // radius: ['45%', '60%'],
            radius: ["45%", "70%"],
            labelLine: {
              normal: {
                length: 10,
                length2: 15
                // smooth: true
              }
            },
            clockwise: true
          }
        ],
        legend: {
          type: "scroll",
          orient: "vertical",
          height: 200,
          itemGap: 8,
          itemWidth: 30,
          itemHeight: 14,
          left: "74%",
          top: "20%",
          textStyle: {
            color: "#8c8c8c",
            fontSize: "12px"
          }
        },
        tooltip: {
          trigger: "item",
          confine: true,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "rgba(50,50,50,0)",
          textStyle: {
            color: "#fff"
          },
          formatter: function(params) {
            const str = `
                            ${params.marker} ${params.data.legendname} <br/>
                            数量: ${params.data.value} <br/>
                            占比: ${params.data.percent}% <br/>
                        `;
            return str;
          }
        }
      };
    },
    overallClick(row) {
      console.log("row :>> ", row);
    }
  },
  components: {
    CommonCard
  }
};
</script>
<style scoped>
.b-stats-middle {
  margin-top: 20px;
}
</style>
